<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
     <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- the body of your page goes here -->
    <!-- stuff -->
     
     
      
  <div class="px-4 pt-5 my-5 text-center border-bottom">
    <h1 class="text-body-emphasis">Hello, <span id="name-goes-here">my friend</span>!</h1>
    <h1 class="display-4 fw-bold text-body-emphasis">Welcome to AI-powered personalized learning assistant</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">This AI personalized learning assistant can answer questions promptly, create exclusive learning paths, adjust difficulty, recommend materials, track progress feedback, provide diverse interactions, integrate interdisciplinary knowledge, recognize emotions and give incentives to help students learn efficiently in all aspects</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
        
      </div>
    </div>
    <div class="overflow-hidden" style="max-height: 30vh;">
      <div class="container px-5">
        
      </div>
  </div>

  <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
    <div class="col">
      <div class="card mb-4 rounded-3 shadow-sm">
        <div class="card-header py-3">
          <h4 class="my-0 fw-normal">Punch card plan</h4>
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
            <li>Punch in daily</li>
            <li>Try to persist</li>
            <li>Let's start today's study</li>
          </ul>
          <a href="Punch.html"><button type="button" class="w-100 btn btn-lg btn-outline-primary">Clocking plan</button></a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-4 rounded-3 shadow-sm">
        <div class="card-header py-3">
          <h4 class="my-0 fw-normal">Learn</h4>
        </div>
        <div class="card-body">
          <ul class="list-unstyled mt-3 mb-4">
            <li>Answer questions</li>
            <li>Track learning progress</li>
            <li>Recommend learning materials</li>
          </ul>
          <a href="tech.html"><button type="button" class="w-100 btn btn-lg btn-outline-primary">Go to study</button></a>
        </div>
      </div>
    </div>
    <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal">History</h4>
          </div>
          <div class="card-body">
            <ul class="list-unstyled mt-3 mb-4">
              <li>Clocking record</li>
              <li>Learning record</li>
              <li>Learning data record</li>
            </ul>
            <a href="history.html"><button type="button" class="w-100 btn btn-lg btn-outline-primary">Check my history</button></a>
          </div>
        </div>
      </div>
  

    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <script src="./scripts/script.js"></script>
    <script src="./scripts/main.js"></script>

</body>

</html>
